<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>穿梭框</title>
        <link rel="stylesheet" type="text/css" href="./source/transfer.css">
	</head>
	<body>
		<div class="transfer" id="app">
			<transfer-list title="源列表" :data="originData"></transfer-list>
			<div class="transfer-operation">
				<p><input type="button" value="<" v-on:click="transferData('originData','targetData')"/></p>
				<p><input type="button" value=">" v-on:click="transferData('targetData','originData')"/></p>
			</div>
			<transfer-list title="目标列表" :data="targetData"></transfer-list>
		</div>
	</body>
</html>
<script type="text/javascript" src="../../2.1.8/vue.js"></script>
<script>
	let data = {
		originData: [  // 源列表
			{
				id:1000,
				title: 'js课程',
				checked: false
			},
			{
				id:1101,
				title: 'css课程',
				checked: false
			},
			{
				id:1002,
				title: 'vue课程',
				checked: false
			},
			{
				id:1103,
				title: 'react课程',
				checked: true
			},
		],
		targetData: [ // 目标列表
			{
				id:105660,
				title: 'Node课程',
				checked: true
			},
			{
				id:11088881,
				title: 'canvas课程',
				checked: true
			}, 
		]
	};
	Vue.component('transfer-list',{
		data(){
			return{
				checkAllStatus : this.data.filter( item => item.checked ).length === this.data.length ? true : false
			}
		},
		props : {
			title : {
				type : String
			},
			data : {
				type : Array
			}
		},
		computed : {
			selectedCount(){
				return this.data.filter(item => item.checked ).length + '/' + this.data.length;
			}
		},
		methods : {
			allCheckfn(){
				var self = this;
				this.data.map(item => {
					item.checked = self.checkAllStatus
					return item
				});
			},
			singleCheckfn(){
				this.checkAllStatus = this.data.filter( item => item.checked ).length === this.data.length ? true : false;
			}
		},
		template : `
			<div class="transfer-list">
				<div class="transfer-header">
					<input type="checkbox" v-model="checkAllStatus" @change="allCheckfn" >
					<span class="transfer-header-title">{{title}}</span>
					<span class="transfer-header-count">{{selectedCount}}</span>
				</div>
				<div class="transfer-list-body">
					<ul class="transfer-list-content">
						<li class="transfer-list-content-item" v-for="item,key in data" data-id="item.id">
							<input type="checkbox" v-model="item.checked" @change="singleCheckfn">
							<span>{{item.title}}</span>
						</li>
					</ul>
				</div>
			</div>
		`
	});
	let vm = new Vue({
		el : '#app',
		data : {
			...data,
		},
		computed : {
			disabled(){
				
			}
		},
		methods : {
			transferData( target, source ){
				let checked = this[source].filter( item => item.checked ).map( item => {
					return {
						...item,
						checked : false
					}
				});
				this[target].push( ...checked );
				this[source] = this[source].filter( item => !item.checked );
			}
		}
	});

</script>